<template>
  <div class="menu-container">
    <div class="left_top" style="margin-top: 20px">
      <div class="batch_choose">当前成绩</div>
      <!---->
      <div class="menu_item">
        <span> 地区：{{ userInfo ? userInfo.areaDict : "-" }} </span>
      </div>
      <div class="menu_item">
        <span> 科目：{{ userInfo.majorDict }} </span>
      </div>
      <div class="menu_item">
        <span> 分数：{{ userInfo ? userInfo.gk_score : "-" }} </span>
      </div>
      <div class="menu_item">
        <span> 位次：{{ userInfo ? userInfo.ranking : "-" }} </span>
      </div>
      <div class="is_edit_info" @click="addScore">修改信息</div>
    </div>
    <addScore ref="addScoreRef" @getUserInfoUpdate="getUserInfoUpdate">
    </addScore>
  </div>
</template>

<script>
import addScore from "@/layout/components/addScore.vue";
import { EventBus } from "@/utils/eventBus";
export default {
  name: "",
  components: { addScore },
  data() {
    return {
      userInfo: {},
      majorList: [
        { label: "1", name: "理科" },
        { label: "2", name: "文科" },
        { label: "3", name: "物理" },
        { label: "4", name: "化学" },
        { label: "5", name: "生物" },
        { label: "6", name: "政治" },
        { label: "7", name: "历史" },
        { label: "8", name: "地理" },
        { label: "9", name: "技术" },
      ],
      myMajorList: "",
    };
  },
  created() {
    EventBus.$on("getUserInfo", () => {
      this.getUserInfoUpdate();
    });
  },
  mounted() {
    setTimeout(() => {
      this.userInfo = JSON.parse(localStorage.getItem("userScoreInfo"));
    }, 500);
  },
  methods: {
    getUserInfoUpdate() {
      this.userInfo = JSON.parse(localStorage.getItem("userScoreInfo"));
    },
    //填报分数
    addScore() {
      this.$refs.addScoreRef.handleOpen();
    },
  },
};
</script>

<style scoped lang="scss">
.menu-container {
  .left_top {
    width: 100%;
    padding: 12px;
    background-color: #fff;
    border-radius: 8px;
  }

  .left_top .batch_choose {
    width: 100%;
    height: 28px;
    border-radius: 4px;
    background: #f6f7f7;
    position: relative;
    padding-left: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left_top .batch_choose .is_triangle {
    position: absolute;
    right: 10px;
    top: 10px;
    transform: rotate(180deg);
  }

  .left_top .menu_item {
    width: 100%;
    padding-left: 8px;
    color: #606166;
    letter-spacing: 0.56px;
    margin-top: 20px;
    cursor: pointer;
    font-weight: 700;
  }

  .left_top .menu_item span {
    font-weight: 700;
  }

  .left_top .is_edit_info {
    width: 100%;
    height: 32px;
    border-radius: 4px;
    background: rgba(201, 225, 251, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0478f1;
    cursor: pointer;
    margin-top: 20px;
    font-weight: 600;
  }

  .left_top .active {
    color: #0478f1;
    font-weight: 700;
  }
}
</style>
